<style>
#fsFilterValues{
padding: 5px;
width: 520px;
}
#fsFilterValues legend{
	font-weight: bold;
font-style: italic;
color: #4c4c4c;
padding: 5px;
}
#fsFilterValues select{
	width: 150px;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
	$("#frmCreateProduct").submit(function(){
		var msg = "";
		if($("#name").attr("value") == ""){
			msg+= "Thiếu tên sản phẩm.\n";
		}
		if($("#price").attr("value") == ""){
			msg+= "Thiếu thông tin giá cả.\n";
		}
		if($("#slug").attr("value") == ""){
			msg+= "Thiếu url hiển thị.\n";
		}
		if($("#man_id").attr("value") == 0){
			msg+= "Chưa chọn hãng sản xuất.\n";
		}
		if($("#category_id").attr("value") == 0){
			msg+= "Chưa chọn thể loại sản phẩm.";
		}
		if(msg != ""){
			alert(msg);
			return false;
		}
	});
	//điền slug
	$("#name").focusout(function(){
		$("#slug").attr("value",getSlug($(this).attr("value")));
	});
	//khi ấn nút thêm ảnh
	$("#btnAddImage").click(function(){
		//đếm số ảnh hiển thị đang có
		var arrImages = $("#images .displayed");
		if(arrImages.length < 4){
			$(".image-"+(arrImages.length+1)).css("display","").addClass("displayed");
		}else{
			alert("Hệ thống chỉ cho phép thêm 4 ảnh cho 1 sản phẩm!");
		}
	});
	//khi nhấn nút xóa ảnh
	$(".btnDeleteImage").click(function(){
		$(this).parent().css("display", "none").removeClass("displayed");
		$(this).next().attr("value","");
	});
	//mỗi lần chọn thể loại thì lấy bộ lọc
	$("#category_id").change(function(){
		$.ajax({
			url: "<?php echo $this->url(array(), "admin_ajax_filters"); ?>",
			data: "cat_id="+ $(this).attr("value"),
			type: "GET",
			dataType: "html",
			success: function(data){
				$("#fsFilterValues").css("display","");
			     $("#fsFilterValues").html(data);
			   }
						
			
		});
	});
	
});

</script>
<div id="r-heading">
	<img src="<?php echo PUBLIC_URL.'/admin/images/product.png';?>" alt=""/>
	<span>Thêm mới sản phẩm</span>
</div>
<?php
//nếu có message thì hiển thị
if(!empty($this->message)){
	echo '<div id="message">'.$this->message.'</div>';
} 
?>
<form id="frmCreateProduct" action ="" method="post">
	<div class="r-left" style="width: 70%; float: left;">

		<div class="row">
			<label for="name">Tên sản phẩm<span style="color:red;">(*)</span></label>
			<input type="text" id="name" name="name" size="50"/>
		</div>
		<div class="row">
			<label for="model" >Model</label>
			<input type="text" id="model" name="model" size="50"/>
		</div>
		<div class="row">
			<label for="man_id" >Hãng sản xuất<span style="color:red;">(*)</span></label>
			<select style="width:200px;" name="man_id" id="man_id">
				<option value="0">Chọn hãng sản xuất</option>
				<?php
				foreach ($this->arrManufacturers as $man){
					echo "<option value='". $man->id. "'>". $man->name. "</option>";
				} 
				?>
			</select>
		</div>
		<div class="row">
			<label for="category_id" >Thể loại sản phẩm<span style="color:red;">(*)</span></label>
			<select style="width:200px;" name="category_id" id="category_id">
				<option value="0">Chọn một thể loại</option>
				<?php
				foreach ($this->arrCategories as $category){
					if($category->level == 2){
						echo "<option value='". $category->id. "'>----". $category->name. "</option>";
					}else{
						echo "<option value='". $category->id. "'>". $category->name. "</option>";
					}
				} 
				?>
			</select>
		</div>
		<div class="row">
			<label for="price" >Giá sản phẩm<span style="color:red;">(*)</span></label>
			<input type="text" id="price" name="price" size="50"/>
		</div>
		<div class="row">
			<label for="show_on_home" >Hiển thị tại trang chủ:</label>
			<input type="checkbox" id="show_on_home" name="show_on_home" value="1" >
		</div>
		<div class="row">
			<label for="page_title" >Tiêu đề trang</label>
			<textarea style="width:323px;" id="page_title" name="page_title"></textarea>
		</div>
		<div class="row">
			<label for="page_description" >Mô tả cho trang (thẻ description)</label>
			<textarea style="width:323px;" id="page_description" name="page_description"></textarea>
		</div>
		<div class="row">
			<label for="name" >Url Hiển thị<span style="color:red;">(*)</span></label>
			<input type="text" id="slug" name="slug" size="50"/>
		</div>
		<div class="row">
			<label for="tag" >Tag</label>
			<input type="text" id="tag" name="tag" size="50" value=""/>
		</div>
		<fieldset id="fsFilterValues" style="display: none;">
		</fieldset>
		<div class="row">
			<label for="short_description" >Mô tả ngắn</label>
			<textarea style="width:323px;" id="short_description" name="short_description"></textarea>
		</div>
		<div class="row">
			<label style="float: none;" for="description" >Mô tả sản phẩm</label>
			<textarea style="width:323px;" id="description" name="description"></textarea>
		</div>
		<div class="row">
			<label style="float: none;" for="specification" >Thông số kỹ thuật</label>
			<textarea id="specification" name="specification"></textarea>
		</div>
		<div class="row">
			<label style="float: none;" for="components" >Thông tin linh kiện</label>
			<textarea id="components" name="components"></textarea>
		</div>
		<div class="row">
			<label style="float: none;" for="ink" >Thông tin mực</label>
			<textarea id="ink" name="ink"></textarea>
		</div>
		<script type="text/javascript">
			CKEDITOR.replace("description");
			CKEDITOR.replace("specification");
			CKEDITOR.replace("components");
			CKEDITOR.replace("ink");
			
			function BrowseServer(id)
			{
	
				// You can use the "CKFinder" class to render CKFinder in a page:
				var finder = new CKFinder() ;
				finder.basePath = '<?php echo PUBLIC_URL."/ckfinder/";?>' ;	// The path for the installation of CKFinder (default = "/ckfinder/").
				
				finder.selectActionFunction = function(fileUrl){
					
					document.getElementById("hdImage-"+id ).value = fileUrl ;
					document.getElementById('imgFeature-'+ id ).src = fileUrl;
					
				}
				finder.popup() ;
	
				
			}
			
		</script>
	</div>

	<div class="r-right" style="width: 25%; float: right;">
		<div class="box">	
			<div class = "b-title">	
				Ảnh đại diện
			</div>
			<div class="b-container">
				<div id="images">
					<div class="image-1 displayed">
						<img src="<?php echo PUBLIC_URL."/admin/images/article_default.jpg";?>" width="100%" id="imgFeature-1" alt="Ảnh đại diện"/>
						<input class="btnSelectImage button" type="button" onclick="BrowseServer(1);" value="Chọn ảnh"/>
						<input type="hidden" name="image[]" value="<?php echo PUBLIC_URL."/admin/images/article_default.jpg";?>" id="hdImage-1"/>
					</div>
					<div class="image-2" style="display: none;">
						<img src="<?php echo PUBLIC_URL."/admin/images/article_default.jpg";?>" width="100%" id="imgFeature-2" alt="Ảnh đại diện"/>
						<input class="btnSelectImage button" type="button" onclick="BrowseServer(2);" value="Chọn ảnh"/>
						<input class="btnDeleteImage button" type="button" value="Xóa ảnh"/>
						<input type="hidden" name="image[]" value="" id="hdImage-2"/>
					</div>
					<div class="image-3" style="display: none;">
						<img src="<?php echo PUBLIC_URL."/admin/images/article_default.jpg";?>" width="100%" id="imgFeature-3" alt="Ảnh đại diện"/>
						<input class="btnSelectImage button" type="button" onclick="BrowseServer(3);" value="Chọn ảnh"/>
						<input class="btnDeleteImage button" type="button" value="Xóa ảnh"/>
						<input type="hidden" name="image[]" value="" id="hdImage-3"/>
					</div>
					<div class="image-4" style="display: none;">
						<img src="<?php echo PUBLIC_URL."/admin/images/article_default.jpg";?>" width="100%" id="imgFeature-4" alt="Ảnh đại diện"/>
						<input class="btnSelectImage button" type="button" onclick="BrowseServer(4);" value="Chọn ảnh"/>
						<input class="btnDeleteImage button" type="button" value="Xóa ảnh"/>
						<input type="hidden" name="image[]" value="" id="hdImage-4"/>
					</div>
					
				</div>
				<div style="margin-top: 5px;">
					<input id="btnAddImage" class="button" type="button" value="Thêm ảnh"/>
				</div>
			</div>
		</div>
		<div>
			<input type="submit" class="button" value="Lưu"/>
			<input type="reset" class="button" value="Làm lại"/>
		</div>
	</div>
</form>